<template>
  <el-dialog :visible.sync="dialogShow" :before-close="check" title="编辑">
    <el-form>
      <el-row class="row-bg">
        <el-col :span="10">
          <el-form-item class="is-required" label="角色名称" label-width="100px">
            <el-input v-model.trim="scopeData.name" placeholder="请输入角色名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row-bg">
        <el-col :span="15">
          <el-form-item label="备注" label-width="100px">
            <el-input v-model="scopeData.remark" type="textarea" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row-bg">
        <el-form-item class="dialog-title" label="权限范围:" label-width="100px" />
        <el-form-item
          v-for="(mainBtn,index) in btnList"
          :key="mainBtn.id"
          :label="mainBtn.menuName"
          class="label-setting"
        >
          <el-checkbox v-model="selectAll[index]" :value="selectBoolean[index]" label="全选" class="all-select" @change="changeAllSelect(index,selectBoolean)">全选</el-checkbox>
          <el-checkbox-group v-model="smallBtnList[index]" class="checkbox-per">
            <el-col v-for="btn in mainBtn.btnList" :key="btn.id" :span="6">
              <el-checkbox :label="btn.buttonCode" name="type">{{ btn.buttonName }}</el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-form-item>
      </el-row>
      <el-form-item>
        <div class="btnList">
          <el-button
            style="width:41%"
            type="primary"
            @click="saveRole"
          >保存</el-button>
          <el-button
            type="primary"
            plain
            style="width:41%"
            class="marginBtn"
            @click="check"
          >取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { editRole, changeRole, saveRole } from '@/api/rolesetting'
import secret from '@/utils/secret'
import { mapGetters } from 'vuex'
export default {
  name: 'EditRole',
  props: {
    // 遮罩
    dialogTableVisible: {
      type: Boolean,
      default: false
    },
    // 用户属性_编辑时
    scope: {
      type: Object,
      default: null
    },
    // 用户新增角色时
    addScope: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      resultNum: [],
      dialogShow: false, // 遮罩
      saveAdd: null,
      btnList: [], // 全部按钮
      scopeData: {
        id: null, // id
        name: null, // 名字
        remark: null, // 备注
        createperson: null, // 创建人
        createtime: null // 创建时间
      },
      menuList: null, // 私人按钮数组
      smallBtnList: [], // 过滤后的btnList
      selectAll: [], // 全选时用的数组
      selectBoolean: [], // 用来校验全选的数组
      allMenuCode: [], // 筛查后的menuBtncode
      allMenuList: [] // 筛查后的menuList
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  watch: {
    // 遮罩监听
    dialogTableVisible(newVal) {
      this.dialogShow = newVal
    },
    // 编辑角色信息
    scope(newVal) {
      this.scopeData = newVal
      // 每次点击变化时，通过监听来获取最新值
      this.getBtnList(2, this.scopeData.id)
    },
    // 增加角色信息
    addScope(newVal) {
      this.scopeData.name = ''
      this.scopeData.remark = ''
      this.getBtnList(1, '')
      // this.saveAdd = newVal
    }
  },
  mounted() {

  },
  methods: {
    // 给父组件传值
    check() {
      this.$emit('closeDialog')
      this.dialogShow = false
    },
    // 请求接口
    getBtnList(num, id) {
      var data = {
        // token: this.token,
        id: id,
        type: num
      }
      console.log('请求参数')
      console.log(data)
      editRole(secret.Encrypt(data)).then(response => {
        console.log('返回数据')
        console.log(response)
        var data = response.data
        // 加入全选按钮
        // 新增
        if (id !== '') {
          data.list.forEach(function(element) {
            if (!!element) { // eslint-disable-line
              var shortBtnList = []
              data.roleBtnList.forEach(function(item) {
                if (!!item) { // eslint-disable-line
                  if (element.menuCode === item.menuCode) {
                    shortBtnList.push(item)
                  }
                }
              })
              element.shortBtnList = shortBtnList
            }
          })
        }
        this.btnList = data.list
        // 剔除多余属性，保留数组格式以用来v-model多选
        // 第一次剔除
        var status = false
        for (var i = 0; i < data.list.length; i++) {
          this.selectBoolean.push(status)
        }
        var allMenuCode = [] // 每个menucode
        var allMenuList = [] // 每个menu的btncode
        if (id !== '') { // eslint-disable-line
          var menuList = [] // menu数组
          var smallBtnList = [] // 私人权限用
          this.btnList.forEach(function(element) {
            if (!!element){ // eslint-disable-line
              for (const i in element) {
                // 遍历私有按钮
                if (i === 'shortBtnList') {
                  menuList.push(element[i])
                }
                // 遍历所有按钮
                if (i === 'btnList') {
                  var btnConnet = [] // btncode
                  var menuCode = [] // 按钮编码
                  element[i].forEach(function(item) {
                    if (!!item) { // eslint-disable-line
                      for (const k in item) {
                        if (k === 'buttonCode') {
                          btnConnet.push(item[k])
                        }
                        if (k === 'menuCode') {
                          menuCode.push(item[k])
                        }
                      }
                    }
                  })
                  allMenuList.push(btnConnet) // btncode
                  allMenuCode.push(menuCode)
                }
              }
            }
          })
          // 第二次剔除，保留了只留code属性
          this.menuList = menuList
          // 所有按钮
          this.selectAll = allMenuList
          var lastAllMenuCode = []
          allMenuCode.forEach(function(value) {
            if (!!value){ // eslint-disable-line
              lastAllMenuCode.push(value[0])
            }
          })
          this.allMenuCode = lastAllMenuCode
          this.allMenuList = allMenuList
          menuList.forEach(function(element) {
            if (!!element) { // eslint-disable-line
              var btn = []
              element.forEach(function(item) {
                if (!!item) { // eslint-disable-line
                  for (const l in item) {
                    if (l === 'btncode') {
                      btn.push(item[l])
                    }
                  }
                }
              })
              smallBtnList.push(btn)
            }
          })
          this.smallBtnList = smallBtnList
        } else {
          this.btnList.forEach(function(element) {
            if (!!element) { // eslint-disable-line
              for (const i in element) {
                // 遍历所有按钮
                if (i === 'btnList') {
                  var btnConnet = [] // btncode
                  element[i].forEach(function(item) {
                    if (!!item) { // eslint-disable-line
                      for (const k in item) {
                        if (k === 'buttonCode') {
                          btnConnet.push(item[k])
                        }
                      }
                    }
                  })
                  allMenuList.push(btnConnet) // btncode
                }
              }
            }
          })
          this.selectAll = allMenuList
          this.btnList.forEach(function(element) {
            if (!!element) { // eslint-disable-line
              allMenuCode.push(element.menuCode)
            }
          })
          this.allMenuCode = allMenuCode
          var sky = []
          this.smallBtnList = []
          for (let i = 0; i < data.list.length; i++) {
            this.smallBtnList.push(sky)
          }
        }
      })
    },
    // 保存修改
    saveRole() {
      var that = this
      var allMenuCode = this.allMenuCode
      var lastBtn = this.smallBtnList
      var allData = []
      lastBtn.forEach(function(item) {
        if (!!item) { // eslint-disable-line
          var middle = []
          item.forEach(function(data) {
            if (!!data) { // eslint-disable-line
              var [newData] = item.map(function(value) {
                return {
                  btncode: data
                }
              })
              if (!!newData) { // eslint-disable-line
                middle.push(newData)
              }
            }
          })
          allData.push(middle)
        }
      })
      allData.forEach(function(value, index) {
        if (!!value){ // eslint-disable-line
          value.forEach(function(item) {
            if (!!item) { // eslint-disable-line
              item.menucode = allMenuCode[index]
            }
          })
        }
      })
      var theLastData = []
      allData.forEach(function(value) {
        if (!!value) { // eslint-disable-line
          value.forEach(function(item) {
            if (!!item) { // eslint-disable-line
              theLastData.push(item)
            }
          })
        }
      })
      var saveLastData = theLastData.filter(function(item) {
        return item.btncode !== null && item.btncode !== '全选'
      })
      var data = null
      if (this.addScope === false) {
        if (saveLastData.length === 0) {
          saveLastData = ''
        }
        data = {
          // token: this.token,
          id: this.scopeData.id,
          name: this.scopeData.name,
          remark: this.scopeData.remark,
          btnList: saveLastData
        }
        if (!!this.scopeData.name) { // eslint-disable-line
          console.log('请求参数')
          console.log(data)
          changeRole(secret.Encrypt(data)).then(response => {
            if (response.resultCode !== '0000') {
              this.$message({
                message: '保存成功！',
                type: 'error'
              })
            } else {
              console.log('返回结果')
              console.log(response)
              this.$message({
                message: '保存成功！',
                type: 'success'
              })
              that.check()
            }
          })
        } else {
          this.$message({
            message: '请输入角色名称',
            type: 'error'
          })
        }
      } else {
        if (saveLastData.length === 0) {
          saveLastData = ''
        }
        data = {
          // token: this.token,
          id: null,
          name: this.scopeData.name,
          remark: this.scopeData.remark,
          btnList: saveLastData
        }
        if (!!this.scopeData.name) { // eslint-disable-line
          console.log('请求参数')
          console.log(data)
          saveRole(secret.Encrypt(data)).then(response => {
            console.log('返回结果')
            console.log(response)
            if (response.resultCode !== '0000') {
              this.$message({
                message: response.resultDesc,
                type: 'error'
              })
            } else {
              this.$message({
                message: '保存成功！',
                type: 'success'
              })
              that.check()
            }
          })
        } else {
          this.$message({
            message: '请输入角色名称',
            type: 'error'
          })
        }
      }
    },
    // 全选
    changeAllSelect(index, selectBoolean) {
      if (this.selectBoolean[index] === false) {
        this.smallBtnList[index] = this.selectAll[index]
      } else {
        this.smallBtnList[index] = []
      }
      this.selectBoolean[index] = !this.selectBoolean[index]
    }
  }
}
</script>
<style>
/* 修改element-ui 样式，私有化label位置 */
  /*.el-form-item__content {
  margin-top: -30px;
  }*/
  .label-setting > label{
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0 0 10px;
    margin-top:-30px;
    padding-left: 40px;
}
  .all-select {
    position: relative;
    left: 50px;
    bottom: 4px;
  }
  .el-col-6 {
    overflow: hidden !important;
    text-overflow:ellipsis !important;
    white-space: nowrap !important;
  }
</style>
<style scoped>
  .checkbox-per{
    margin-top: -43px;
    padding-left: 180px;
  }
  .btnList{
    width: 200px;
    text-align: center;
    margin: 0 auto;
  }
  .btn{
    margin-bottom: -20px !important;
    padding-bottom: 10px;
  }
  .marginBtn{
    margin-left: 30px;
  }
  .leftPosition{
    margin-left: 20px;
  }
  .add{
    font-size: 100px;
  }
</style>
